<template>
	<div ref="scrollable" class="situation-alarm-record">
		<vue-scroll>
			<div v-if="alarmList.length !== 0">
				<transition-group :name="transitionName" tag="ul">
					<li :key="item.id" v-for="item in alarmList" class="alarm-list">
						<div>
							<div class="title">
								<a-tooltip placement="topLeft">
									<template #title>{{ item.content }}</template>
									<p class="type">{{ item.content }}</p>
								</a-tooltip>
								<a-tooltip placement="topLeft">
									<template #title>{{ item.mAreaName }}{{ item.deviceName }}</template>
									<p class="name">{{ item.mAreaName }}{{ item.deviceName }}</p>
								</a-tooltip>
								<a-tooltip placement="topLeft">
									<template #title>{{ dayjs(item.createTime).format('MM-DD HH:mm') }}</template>
									<p class="date">{{ dayjs(item.createTime).format('MM-DD HH:mm') }}</p>
								</a-tooltip>
							</div>
							<div class="record-img" @click="openAlarmModal(item)">
								<img
									:src="item.imageUrl"
									:onerror="
										(e: Event) => {
											(e.target as HTMLImageElement).src = defaultImage;
											(e.target as HTMLImageElement).onerror = null;
										}
									"
								/>
							</div>
						</div>
					</li>
				</transition-group>

				<infinite-loading :firstload="false" @infinite="load">
					<template #spinner>
						<div class="loading-style">加载中...</div>
					</template>
					<template #complete>
						<div class="alarm-list-loader" @click="loadMore">查看更多</div>
					</template>
				</infinite-loading>
			</div>
			<div v-else class="nothing">
				<img src="@/global-assets/svgs/situation-nothing.svg" />
				<p>暂无记录</p>
			</div>
		</vue-scroll>
		<global-alarm-modal ref="alarmModalRef"></global-alarm-modal>
	</div>
</template>

<script setup lang="ts" name="SituationAlarmRecord">
import dayjs from 'dayjs';
import defaultImage from '@/global-assets/imgs/img-none.png';
import { TsAlarmList } from '../../type';
import { realVideoApi } from '../../api';
import { historyCallInterval } from '../../utils';

const emits = defineEmits<{
	(e: 'loadMore'): void;
}>();

const alarmList = ref<TsAlarmList[]>([]);

const loadMore = (): void => {
	emits('loadMore');
};

const scrollable = ref<HTMLElement>();
const scrollNum = ref(2);

const loading = ref(false);
const transitionName = ref('');

const alarmModalRef = ref();
const openAlarmModal = (item: TsAlarmList): void => {
	let data = {
		id: item.id,
		tag: item.content,
		time: item.createTime,
		image: item.imageUrl,
		title: item.positionName + '-' + item.deviceName
	};
	alarmModalRef.value.openModal([data]);
};
// 获取报警记录列表
const getAlarmList = async (current: number = 1, isReset: boolean = true, deviceIds: string | null = null): Promise<void> => {
	try {
		loading.value = true;

		let res = await realVideoApi.getAlarmList({ current, areDeviceIdList: deviceIds, pageSize: 10, auditType: 1 });
		if (res.data) {
			if (isReset) {
				alarmList.value = res.data;
			} else {
				scrollNum.value++;
				alarmList.value = alarmList.value?.concat(res.data);
			}
		}
	} catch (error) {
		console.log('error', error);
	} finally {
		loading.value = false;
	}
};

const load = async ($state: { complete: () => void }): Promise<void> => {
	const scrollDiv = scrollable.value as HTMLElement;

	// 滚动条已经到达底部
	if (!(scrollDiv.scrollTop + scrollDiv.clientHeight >= scrollDiv.scrollHeight - 1)) {
		return;
	}

	if (loading.value) {
		return;
	}
	if (scrollNum.value > 5) {
		$state.complete();
		return;
	}

	await getAlarmList(scrollNum.value, false, null);
};
const getInterval = historyCallInterval();

const timer = ref();
// 推送消息
const getData = (data: TsAlarmList): void => {
	transitionName.value = getInterval() > 600 ? 'event-list' : '';
	timer.value && clearTimeout(timer.value);
	setTimeout(() => {
		alarmList.value.unshift(data);
		clearTimeout(timer.value);
	}, 1000);

	// 新增数据大于10个才删除
	if (!alarmList.value?.length) {
		return;
	}
	if (alarmList.value?.length > 10) {
		alarmList.value?.pop();
	}
};

defineExpose({
	getData,
	getAlarmList
});
</script>

<style lang="less" scoped>
.situation-alarm-record {
	position: relative;
	overflow-y: scroll;
	width: calc(100% + 6px);
	height: 870px;

	.loading-page {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-color: rgba(23, 40, 69, 0.96);
		transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		align-items: center;
		justify-content: center;
		backdrop-filter: saturate(244%) blur(5px);

		.ant-spin {
			color: rgba(24, 104, 233, 0.65);
			transform: scale(0.8);
		}
	}

	.alarm-list {
		width: 301px;
		height: 208px;
		margin: 0 20px;
		margin-bottom: 12px;
		border: 1px solid rgba(32, 48, 91, 1);
		border-radius: 6px;
		background-color: rgb(41, 48, 64);
		box-shadow: 0 2px 8px 0 rgba(37, 37, 45, 0.38);

		.title {
			display: flex;
			width: 100%;
			height: 29px;
			padding-left: 20px;
			font-size: 12px;
			line-height: 29px;
			color: #fff;
			background: url('@/global-assets/imgs/alarm-record-bg.png') no-repeat center bottom;
			background-size: 100% 100%;

			.type {
				overflow: hidden;
				width: 80px;
				margin-right: 12px;
				font-size: 16px;
				font-weight: 600;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name {
				overflow: hidden;
				width: 90px;
				margin-top: 1px;
				margin-right: 12px;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: @text02;
			}

			.date {
				margin-top: 3px;
				color: @text01;
			}
		}

		.record-img {
			padding: 8px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.alarm-list:first-child {
		margin-top: 20px;
	}

	.nothing {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 148px;
		height: 148px;
		margin-top: -94px;
		margin-left: -74px;

		p {
			margin-top: 10px;
			font-size: 14px;
			text-align: center;
			color: @text02;
		}
	}
}

.event-list-move,
.event-list-enter-active,
.event-list-leave-active {
	transition: all 0.5s ease;
}

.event-list-enter-from {
	opacity: 0;
	transform: translateY(-30px);
}

.event-list-leave-to {
	opacity: 0;
	transform: translateY(30px);
}
</style>
